<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <title>Document</title>
    <link rel="stylesheet" href="./css/pub.css">
    <script src="./front/iconfont.js"></script>
    <link rel="stylesheet" href="./front/iconfont.css">
    <style>
        .tab {
            width: 100%;
        }
    
        .tt,.tt2,tt3{
            line-height: 33px;
            border-bottom: 3px solid #eee;
            display: flex;
            font-size: 14px;
            flex-wrap: wrap;
        }
        .tt span ,.tt2 span,.tt3 span{
            width: 14%;
            text-align: center;
            letter-spacing: 3px;
        }
        .tt2 p{
            width: 14%;
            text-align: center;
            letter-spacing: 3px;
        }
        .tt2 .tc2,.tt3 .tc2{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            
        }
        .tt3{
            display: none;
        }
        .tt .cur,.tt2 .cur,.tt .cur {
            background-color: #fff;
            color: #c00;
            font-weight: bold;
            
        }
        .tt2.cur{
            background-color: #fff;
            color: #c00;
            font-weight: bold;
        }
        .tc {
            font-size: 60px;
            text-align: center;
            display: none;
        }
        .tc ul{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
        }
        .tc li{
            width: 25%;
            height: 200px;
            border-radius: 10px;
            margin:10px 3%;
        }
        .tc img{
            border-radius: 10px;
            width: 100%;
            height: 90%;
        }
        .tc p{
            width: 100%;
            height: 10%;
            font-size: 16px;
        }
        .show{
            display: block;
        }
        .tout{
            width: 100%;
            display: flex;
            height: 50px;
            justify-content: space-between;
            align-items: center;
        }
        .tout li{
            width: 30%;
        }
        .tout .iconfont{
            font-size: 30px;
        }
        .tout li:nth-last-of-type(2){
            font-size: 30px;
            display: flex;
            justify-content: center;
        }
        .tout li:nth-last-of-type(1){
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
    <div class="tab">
        <ul class="tout">
            <li><a href="./home_page.html" class="iconfont icon-fangxiang-xiangyou-copy"></a></li>
            <li>分类</li>
            <li><a href="" class="iconfont icon-sousuo"></a></li>
        </ul>
        <ul class="tt">
            <span class="cur">全部</span>
            <span>玄幻</span>
            <span>奇幻</span>
            <span>异能</span>
            <span>科幻</span>
            <span>冒险</span>
            <span>动作</span>
            <span>竞技</span>
            <span>恐怖</span>
            <span>犯罪</span>
            <span>悬疑</span>
            <span>武侠</span>
            <span>历史</span>
            <span>日常</span>
            <span>恋爱</span>
            <span>剧情</span>
            <span>唯美</span>
        </ul>
        <ul class="tt2">
            <li class="tc2 ">
                <span class="cur">最热</span>
                <span>最新</span>
                <span>口碑</span>
                <span> </span>
                <span> </span>
                <span> </span>
                <p class="menu">展开</p>
            </li>
            
        </ul>
        <ul class="tt3" style="display: none;">
            <li class="tc2">
                <span class="cur">全部</span>
                <span>连载</span>
                <span>完结</span>
            </li>
            <li class="tc2">
                <span class="cur">全部</span>
                <span>免费</span>
                <span>付费</span>
                <span>v会员</span>
            </li>
            <li class="tc2">
                <span class="cur">全部</span>
                <span>国漫</span>
                <span>日漫</span>
                <span>韩漫</span>
            </li>
            <li class="tc2">
                <span class="cur">全部</span>
                <span>古灵阁</span>
                <span>涂山</span>
                <span>灵云</span>
            </li>
        </ul>



        <div class="tc show">
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/fl1.jpg" alt="">
                        <p>我的徒弟都...</p>
                        
                    </a>
                </li>
                <li>
                    <img src="./img/fl2.jpg" alt="">
                    <p>我为邪帝</p>
                </li>
                <li>
                    <img src="./img/fl3.jpg" alt="">
                    <p>大象无形</p>
                </li>
                <li>
                        <img src="./img/3.jpg" alt="">
                        <p>一人之下</p>
                    </a>
                </li>
                <li>
                    <img src="./img/fl4.png" alt="">
                    <p>星甲魂将传</p>
                </li>
                <li>
                    <img src="./img/fl5.jpg" alt="">
                    <p>反派大师兄...</p>
                </li><li>
                        <img src="./img/fl6.jpg" alt="">
                        <p>开局一座山</p>
                </li>
                <li>
                    <img src="./img/fl7.jpg" alt="">
                    <p>传武</p>
                </li>
                <li>
                    <img src="./img/fl8.png" alt="">
                    <p>玷染</p>
                </li>
            </ul>
        </div>
        <div class="tc">
            <ul>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
            
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                    <p>全职法师</p>
                </li>
            </ul>
            
        </div>
        <div class="tc">
            <ul>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                    <p>一人之下</p>
                </li>
            </ul>
        </div>
        <div class="tc">4</div>
        <div class="tc">5</div>
        <div class="tc">6</div>
        <div class="tc">7</div>
        <div class="tc">8</div>
        <div class="tc">9</div>
        <div class="tc">10</div>
        <div class="tc">11</div>
        <div class="tc">12</div>
        <div class="tc">13</div>
        <div class="tc">14</div>
        <div class="tc">15</div>
        <div class="tc">16</div>
        <div class="tc">17</div>
        <div class="tc">1</div>
        <div class="tc">2</div>
        <div class="tc">3</div>
        <div class="tc">4</div>
        <div class="tc">5</div>
        <div class="tc">6</div>
        <div class="tc">7</div>
        <div class="tc">8</div>
        <div class="tc">9</div>
        

    </div>
    <script>
        var tab=document.querySelector(".tab");
        var tt=tab.querySelector(".tt");
        var span=tab.getElementsByTagName("span");
        var tc=tab.querySelectorAll(".tc");
        var tt2=tab.querySelector(".tt2");
        var tt3=tab.querySelector(".tt3");
        var menu=tt2.querySelector("p");
        for(var i=0;i<span.length;i++){
            span[i].index=i;
            span[i].onmouseover=function(){
                for(j=0;j<tc.length;j++){ 
                    tc[j].style.display="none"
                    span[j].className="";
                }
                tc[this.index].style.display="block";
                this.className="cur"
                
            }
            
        }
        menu.onmouseover=function(){
                tt3.style.display="block";
                menu.innerHTML="收起";
            }
            menu.onmouseout=function(){
                tt3.style.display="none";
                menu.innerHTML="展开";
            }
    </script>
</body>
</html>